<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jet-CMS Login Page.</title>
    <link type="text/css" rel="stylesheet" th:href="@{/pure-min.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/main.css}" />
    <script type="text/javascript" th:src="@{/main.js}"></script>
    <script type="text/javascript" th:src="@{/vue-min.js}"></script>
    <style>
        .container {
            width: 500px;
        }
        .logo {
            width: 100px;
            border-radius: 50%;
        }
        .panel {
            background-color: #f6f6f6;
            border-radius: 8px;
            box-shadow: 4px 4px 10px #ccc;
        }
        .panel-header {
            padding: 10px;
            font-size: 22px;
            text-align: center;
            border-bottom: 2px solid #74cef1;
        }
        .panel-body {
            text-align: center;
            padding: 20px 0 40px;
        }
        .pure-form input {
            margin-bottom: 10px;
        }
        .pure-form button {
            margin-top: 10px;
        }
        .tips {
            font-size: 24px;
            color: #ff6800;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="panel">
                <div class="panel-header">Jet-CMS 管理员登录</div>
                <div class="panel-body">
                    <img src="/images/jet-icon.png" class="logo" />
                    <p class="tips">{{tips}}</p>
                    <form class="pure-form" v-on:submit.prevent="adminLogin">
                        <input id="account" v-model="account" type="text" class="pure-input-1-2" placeholder="填写账号" />
                        <input id="password" v-model="password" type="password" class="pure-input-1-2" placeholder="填写密码" />
                        <button type="submit" class="pure-button btn-blue pure-input-1-2">登录</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            account: '',
            password: '',
            tips: ''
        },
        methods: {
            adminLogin: function() {
                if (this.account == '') {
                    alert('请填写账号');
                    document.getElementById('account').focus();
                    return;
                }
                if (this.password == '') {
                    alert('请填写密码');
                    document.getElementById('password').focus();
                    return;
                }
                httpRequest(
                    '/admin/login.do',
                    {account: this.account, password: this.password},
                    function(res) {
                        if (res.code == 1) {
                            location.href = '/home';
                        } else {
                            vue.tips = res.error;
                            vue.account = '';
                            vue.password = '';
                        }
                    },
                    'json'
                );
            }
        }
    });
</script>
</html>